<template>
  <div>
    <div class="head">
      <a @click="$router.go(-1)" class="return"></a>
      {{$t('DepositDetails.v1')}}
    </div>
    <div class="overlay">
      <van-row class="term">
        <van-col span="12">
          <p>{{yearNumber}}</p>
          <p> {{$t('DepositDetails.v2')}}</p>
        </van-col>
        <van-col span="12">
          <p>{{number}}{{$t('DepositDetails.v3')}}</p>
          <p>{{$t('DepositDetails.v4')}}</p>
        </van-col>
      </van-row>
      <van-row class="deal">
        <van-col span="12">{{$t('DepositDetails.v5')}}{{dealNumber}}{{$t('DepositDetails.v6')}}</van-col>
        <van-col span="12">{{$t('DepositDetails.v7')}}</van-col>
        <!-- <van-col span="8"></van-col> -->
      </van-row>
      <van-row class="discount">
        <van-col span="12">{{$t('DepositDetails.v8')}}</van-col>
        <van-col span="0"></van-col>
        <van-col span="12">
          <span class="on" style="float: right;">{{$t('DepositDetails.v9')}}</span>
          <!-- <span>万分</span> -->
        </van-col>
      </van-row>
      <div style="margin:0 15px" v-if='yearNumbers ==0'>
        <div class="charts">
          <div id="barGraph" style="height:260px;"></div>
        </div>
        <van-row class="discountDate">
          <van-col span="24">
            <span class="on">{{$t('DepositDetails.v10')}}</span>
            <!-- <span>近一月</span>
            <span>近三月</span> -->
          </van-col>
        </van-row>
      </div>
      <div v-if='yearNumbers ==1' style="color:#999;margin:0 15px;margin-bottom:30px;text-align:center">
        {{$t('DepositDetails.v11')}}
      </div>
      <div class="rule cf">
        <p>{{$t('DepositDetails.v12')}}</p>
        <!-- <p @click="$router.push({path:'TransactionRules'})">
          查看详情
          <van-col>
            <van-icon name="arrow" size="14" />
          </van-col>
        </p> -->
      </div>
      <div class="steps" v-html="title">
        <!-- <img  src="http://www.9665.com/uploadfile/2018/1017/20181017042339993.jpg">
        本产品不接受退换货，等等一些要求。成交后不可撤销，等等一些无理的要求是不接受的. -->

      </div>
      <!-- <van-steps :active="active" class="steps">
        <van-step>
          <p>今天</p>
          <p>预约买入</p>
        </van-step>
        <van-step>
          <p>07-18</p>
          <p>开始计息</p>
        </van-step>
        <van-step>
          <p>07-19</p>
          <p>查看收益</p>
        </van-step>
      </van-steps>
      <div class="stepsTit">本产品不接受退换货，等等一些要求。</br>成交后不可撤销，等等一些无理的要求是不接受的。</div> -->
      <div class="appointmentBtn" @click="appointment"><span>{{$t('DepositDetails.v13')}}</span></div>
    </div>
  </div>
</template>

<script>
    import {coinMmoney} from './../utils/api';
    // 引入基本模板,按需加载
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    // 引入柱状图
    require('echarts/lib/chart/pie');
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    let _this;
    export default {
        data() {
            return {
                active: 1,
                number: 0,
                data: [],
                percentage: [],
                yearNumber: '0%',
                yearNumbers: 0,
                dealNumber: 0,
                title: ''
            };
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {
            this.number = this.$route.query.times
            this.discount()
        },
        methods: {
            timestampToTime(timestamp) {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                // return Y+M+D+h+m+s;
                return M + D
            },
            discount() {
                let s;
                coinMmoney.getAnnualRateView({
                    size: 7,
                    current: 1,
                    cycle: this.number
                }).then(res => {
                    this.data = res.data.records.reverse().map(item => {
                        return this.timestampToTime(item.createTime)
                    })
                    this.percentage = res.data.records.reverse().map(item => {
                        return item.annualizedRate
                    })
                    s = res.data.records.length;
                    // console.log(s)
                    if (s > 0) {
                        this.yearNumbers = 0
                        this.yearNumber = res.data.records[s - 1].annualizedRate.toFixed(4) + '%'
                    } else {
                        this.yearNumbers = 1
                        this.yearNumber = '0%'
                    }
                    if (this.data.length !== 0) {
                        this.drawBar()
                    }
                })
                // 交易数量
                coinMmoney.getCoinManagementCount({
                    cycle: this.number
                }).then(res => {
                    if (res.code == 200) {
                        this.dealNumber = res.data
                    }
                })
                // 交易规则
                coinMmoney.WEBCONFIGTRADING_RULES({}).then(res => {
                    if (res.code == 200) {
                        // this.title =res.data.value
                        if (res.data !== null || res.data !== []) {
                            this.title = res.data.value
                        }
                    }
                })
            },
            drawBar() {
                // 基于dom，初始化echarts实例
                let barGraph = echarts.init(document.getElementById('barGraph'));
                // 绘制图表
                barGraph.setOption({
                    title: {
                        // text: '百分比',
                        subtext: _this.$t('DepositDetails.v14')
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} <br/>: {c}',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        data: this.data
                        // data: ["51600-05-13 17:40:0", "51600-05-14 2:0:0", "51600-05-14 10:20:0", "51600-05-14 18:40:0", "51600-05-15 3:0:0", "51600-05-15 11:20:0", "51600-05-15 19:40:0"]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: _this.$t('DepositDetails.v2'),
                        // data: [20.5, 50.5, 1110.522225, 10.5, 30.2, 60.9, 12.4],
                        data: this.percentage,
                        type: 'line'
                    }]
                })
            },
            appointment() {
                this.$router.push({path: 'DepositBuy', query: {times: this.number}})
            }
        }
    };
</script>

<style lang="less" scoped>
  .cf {
    zoom: 1;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .pr {
    position: relative;
  }

  .cf:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
  }

  .head {
    background: #fff;
    color: #333;
  }

  .head .return:after {
    border-color: #333;
  }

  .head .operating /deep/ i {
    vertical-align: middle;
  }

  .operating {
    color: #333;
  }

  .overlay {
    background: #fff;
    overflow-y: scroll;
  }

  .term {
    padding: 15px 0;
    text-align: center;

    div {
      p {
        font-size: 23px;
        font-weight: 700;
        color: #f01d1d;

        &:nth-child(2) {
          font-size: 12px;
          color: #999;
          margin-top: 5px;
        }
      }

      &:nth-child(2) {
        p {
          font-size: 23px;
          font-weight: 700;
          color: #333;

          &:nth-child(2) {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .deal {
    text-align: center;
    margin: 0 15px;
    border-bottom: 1px solid #ededed;
    padding: 25px 0;
    font-size: 12px;
    color: #333;
  }

  .discount {
    padding: 20px 15px;

    div {
      color: #333;
      font-size: 15px;
      font-weight: 700;

      &:nth-child(3) {
        font-size: 0;

        span {
          font-weight: 500;
          font-size: 12px;
          display: inline-block;
          height: 22px;
          line-height: 22px;
          padding: 0 10px;
          background: #f6f7f8;
          border-radius: 11px;

          &.on {
            background: #48c682;
            color: #fff;
          }

          &:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .discountDate {
    padding: 25px 0;
    text-align: center;
    font-size: 0;
    color: #333;

    span {
      display: inline-block;
      font-size: 12px;
      height: 22px;
      line-height: 22px;
      padding: 0 10px;
      border-radius: 11px;
      background: #fff;
      margin: 0 6px;

      &.on {
        background: #f6f7f8;
        color: #3fb776;
      }
    }
  }

  .rule {
    margin: 0px 15px;
    padding: 15px 0;
    border-top: 1px solid #ededed;

    p {
      font-size: 15px;
      color: #333;
      font-weight: 700;
      float: left;

      &:nth-child(2) {
        font-size: 12px;
        color: #999;
        font-weight: 500;
        float: right;

        .van-col {
          float: inherit;

          i {
            vertical-align: middle;
            margin-left: 5px;
          }
        }
      }
    }
  }

  .steps {
    padding: 0px 15px;
    margin-bottom: 70px;
    font-size: 12px;
    color: #999;

    img {
      display: block;
      max-width: 100%;
      margin: 10px auto
    }
  }

  /deep/ .steps .van-step--horizontal .van-step__circle-container {
    top: -10px;
  }

  /deep/ .steps .van-step--horizontal .van-step__line {
    top: -10px;
  }

  /deep/ .steps .van-step--horizontal .van-step__title p {
    font-size: 12px;
    color: #333;
    text-align: center;
    font-weight: 700;
  }

  /deep/ .steps .van-step--horizontal:first-child .van-step__title p {
    text-align: left;
  }

  /deep/ .steps .van-step--horizontal:last-child .van-step__title p {
    text-align: right;
  }

  /deep/ .steps .van-step--horizontal .van-step__title p:nth-child(2),
  /deep/ .steps .van-step--horizontal:last-child .van-step__title p:nth-child(2) {
    font-size: 13px;
    color: #333;
    font-weight: 700;
    margin-top: 4px;
  }

  /deep/ .steps.van-steps--horizontal .van-steps__items {
    padding: 0;
  }

  .stepsTit {
    margin: 0 15px;
    font-size: 12px;
    color: #999;
    padding-bottom: 20px;
    border-bottom: 1px solid #ededed;
    line-height: 2;
  }

  .appointmentBtn {
    padding: 10px 0;
    background: #fff;
    color: #fff;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;

    span {
      height: 100%;
      display: block;
      margin: 0 15px;
      background: #48c682;
      padding: 10px 0;
      border-radius: 10px;
    }
  }
</style>
